<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>考勤-日历</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/base.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="css/comm.css" />
    <link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="../script/vant/index.css" />
    <link rel="stylesheet" type="text/css" href="./css/kaoqin_rili.css" />
    <style>
        /* 日历样式 */
        /* .van-overlay{
            background-color: transparent;
        }
        .van-calendar__header-title{
            display: none;
        } */
        .van-calendar__body {
            display: -webkit-inline-box;
            margin-top: 10px;
        }

        .van-calendar__month-title {
            display: none;
        }

        .van-divider {
            margin: 0px;
        }

        .proInfo ul li.bigheight {
            height: 4rem;
        }

        .van-popup--center {
            width: 100%;
            bottom: 0px;
            top: unset;
            left: unset;
            /* color:#ca6d16; */
        }

        .van-popup--center {
            -webkit-transform: unset;

        }
    </style>
</head>

<body>
    <div id="app" v-cloak>

        <van-popup v-model="showyear">
            <van-datetime-picker v-model="currentDate" type="year-month" title="选择年月" :min-date="minDate"
                :max-date="maxDate" :formatter="formatter" @confirm="doSureConfirm" @cancel="closeYear" />
        </van-popup>
        <!-- <div style="background: #f00; width: 100%;">jguidg</div> -->
        <section id="main_refresh" class="aui-refresh-content">
            <div class="posibox boxsty">
                <div class="daka_result">
                    <div class="topbox" style="border-bottom: solid 0.5px #eee;">
                        <div class="my_user_info_cont">
                            <div class="userbox fl">
                                <div class="my_user_img"><img src="../image/task_con_img3.png" /></div>
                                <div class="my_user_info">
                                    <div class="my_user_name">龚晓瑾</div>
                                    <div class="my_user_postion">客服部-客服经理</div>
                                </div>
                            </div>
                            <div class="top_timer fr">
                                <div class="timer_box">
                                    <ul>
                                        <li v-bind:class="{'timetype_active':dateType=='d'}"
                                            v-on:click="choosetime('d')">日</li>
                                        <li v-bind:class="{'timetype_active':dateType=='w'}"
                                            v-on:click="choosetime('w')">周</li>
                                        <li v-bind:class="{'timetype_active':dateType=='m'}"
                                            v-on:click="choosetime('m')">月</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="dk_result_box">
                        <div v-if="dateType!='d'" class="nowday"><label
                                v-on:click="open_year()">{{nowYear}}</label><span>{{selectTime}}</span></div>
                        <div v-if="dateType=='d'">
                            <div class="rili_tips">
                                <div class="rili_item">
                                    <i class="icon iconfont icon-hongdian" style="color:#07b650"></i>
                                    全天考勤正常
                                </div>
                                <div class="rili_item">
                                    <i class="icon iconfont icon-hongdian" style="color:#ee7301"></i>
                                    当天存在异常：迟到、早退、缺卡
                                </div>
                                <div class="rili_item">
                                    <i class="icon iconfont icon-hongdian" style="color:#bbb"></i>
                                    当天提交过：请假
                                </div>
                            </div>
                            <!-- 日历 -->
                            <div style="width: 100%;">
                                <div class="rili_title">
                                    <i class="icon iconfont icon-comiiszuojiantou" style="float: left; color:#bbb"></i>
                                    2022-09
                                    <i class="icon iconfont icon-arrow-right" style="float: right; color:#bbb"></i>
                                    <!-- {{day0fnowMonth}} -->
                                </div>
                                <van-cell :poppable="false" :value="date" @click="show = true" />
                                <van-calendar v-model="show" :poppable="false" :show-title="false" color="#289fff"
                                    :show-subtitle="false" :lazy-render="true" :show-confirm="false" :min-date="minDateRili" :max-date="maxDateRili" row-height="40"
                                    @confirm="onConfirm">
                                    <template #bottom-info="day">
                                        <span v-if="getCount(day)==1" class="custom-title">
                                            <i class="icon iconfont icon-hongdian" style="color:#07b650; font-size: 0.2rem;line-height: 1rem; margin-top: 10px;"></i>
                                        </span>
                                        <span v-if="getCount(day)>1&&getCount(day)<5" class="custom-title">
                                            <i class="icon iconfont icon-hongdian" style="color:#ee7301; font-size: 0.2rem;line-height: 1rem;"></i>
                                        </span>
                                        <span v-if="getCount(day)==5" class="custom-title">
                                            <i class="icon iconfont icon-hongdian" style="color:#bbb; font-size: 0.2rem;line-height: 1rem;"></i>
                                        </span>
                                    </template>
                                </van-calendar>
                            </div>
                            <van-divider><i class="icon iconfont icon-down" style="color: #ddd;"></i></van-divider>
                            <div class="content_box">
                                <div class="content_item">
                                    <div class="content_item_title">上班 15:58
                                        <span class="daka_status">迟到</span>
                                    </div>
                                    <div class="dakaitem_address">
                                        <i class="icon iconfont icon-icon"></i>{{GPSLocation}}
                                    </div>
                                </div>
                                <div class="content_item">
                                    <div class="content_item_title">上班 15:58
                                        <span class="daka_status">迟到</span>
                                    </div>
                                    <div class="dakaitem_address">
                                        <i class="icon iconfont icon-icon"></i>{{GPSLocation}}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 周 -->
                        <div v-if="dateType=='w'||dateType=='m'">
                            <div v-if="dateType=='w'" style="margin-top: 15px;">
                                <div class="week_box_main">
                                    <div v-on:click="beforeMonth()" style="width: 5%; float: left; padding-top: 8px;"><i
                                            class="icon iconfont icon-comiiszuojiantou" style="color: #ddd;"></i></div>
                                    <div style="width: 86%; float: left; margin-left: 2%;">
                                        <div class="aui_tab_box">
                                            <div class="aui-tab aui-tab-color">
                                                <div class="aui-tab-item menu_tapmode"
                                                    v-on:click="chooseWeek(index,item)"
                                                    v-bind:class="{'time_active':nowWeek==index+1}"
                                                    v-for="(item,index) in showNowWeekInMonth">
                                                    <label class="labelbox">
                                                        第{{index+1}}周
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div v-on:click="nextMonth()" style="width: 5%; float: right; padding-top: 8px;"><i
                                            class="icon iconfont icon-arrow-right" style="color: #ccc;"></i></div>
                                </div>
                            </div>
                            <!-- <div v-if="dateType=='w'" style="margin-top: 15px;">
                                <div class="aui-media-list-item-inner btn_line proInfo"  ref="scrollWeekBox">
                                    <ul class="aui-tab-item" style="width:100%;">
                                        <li class="proli" ref="scrollWeekItem" v-for="(item,yindex) in weekList" >
                                            <div class="week_box_main" >
                                                <ul>
                                                    <li v-if="item2.length>0" v-on:click="chooseWeek(index)" v-bind:class="{'time_active':Number(nowWeek)===Number(index+1) && Number(yearActiveMonth) === Number(yindex+1)}" v-for="(item2,index) in item">
                                                        <div class="weekli">第{{index+1}}周</div>
                                                    </li>
                                                </ul>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div> -->
                            <div v-if="dateType=='m'" class="aui_tab_box monthstyle" ref="scrollBox">
                                <div class="aui-tab aui-tab-color" style="padding-bottom: 15px;">
                                    <div v-on:click="chooseyue(index)" ref="scrollItem"
                                        class="aui-tab-item menu_tapmode"
                                        v-bind:class="{'time_active':nowMonth==index+1}" style="margin-left: 10px; "
                                        v-for="(item,index) in monthList">
                                        <label class="labelbox">
                                            {{index+1}}月
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <div class="week_mian">
                                <ul>
                                    <li>
                                        <div class="week_item">
                                            <div class="week_item_count">0</div>
                                            <div class="week_item_title">平均工时</div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="week_item">
                                            <div class="week_item_count">0</div>
                                            <div class="week_item_title">出勤天数</div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="week_item">
                                            <div class="week_item_count">0</div>
                                            <div class="week_item_title">出勤班次</div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="week_item">
                                            <div class="week_item_count">0</div>
                                            <div class="week_item_title">休息天数</div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="week_item">
                                            <div class="week_item_count">0</div>
                                            <div class="week_item_title">迟到</div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="week_item">
                                            <div class="week_item_count">0</div>
                                            <div class="week_item_title">早退</div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="week_item">
                                            <div class="week_item_count">0</div>
                                            <div class="week_item_title">缺卡</div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="week_item">
                                            <div class="week_item_count">0</div>
                                            <div class="week_item_title">旷工</div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="week_item">
                                            <div class="week_item_count">0</div>
                                            <div class="week_item_title">外勤</div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="week_item">
                                            <div class="week_item_count">0</div>
                                            <div class="week_item_title">加班</div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="week_item">
                                            <div class="week_item_count">0</div>
                                            <div class="week_item_title">补卡申请</div>
                                        </div>
                                    </li>
                                </ul>

                            </div>
                            <div class="tongji_time">统计截至{{nowTime}}</div>


                        </div>


                    </div>


                </div>
            </div>
        </section>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/jquery-3.1.1.min.js"></script>
<script type="text/javascript " src="../script/vant/vue.js"></script>
<script type="text/javascript " src="../script/vant/vant.js"></script>
<script type="text/javascript" src="../script/config.js"></script>
<script type="text/javascript" src="../script/aui-toast.js"></script>
<script type="text/javascript" src="../script/aui-scroll.js"></script>
<script type="text/javascript" src="../script/aui-tab.js"></script>
<script type="text/javascript " src="../script/moment/moment.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/mui.min.js"></script>
<script type="text/javascript" src="js/kaoqin_rili.js"></script>

</html>